<template>
  <div class="column fit">
    <q-bar class="row" style="background-color: transparent">
      <div
        class="file-name non-selectable col text-sub text-no-wrap text-center one-line-text"
      >
        {{ filename }}
      </div>
      <q-btn
        text-color="sub"
        dense
        flat
        icon="minimize"
        @click="emit('minimize')"
      />
      <q-btn
        text-color="sub"
        dense
        flat
        icon="mdi-arrow-expand"
        @click="emit('maximize')"
      />
      <q-btn
        text-color="sub"
        dense
        flat
        icon="close"
        @click="emit('close')"
        v-close-popup
      />
    </q-bar>
    <div class="col row fit q-pa-md q-gutter-x-md">
      <div class="col column q-gutter-y-md justify-around">
        <q-input
          dense
          label="Title"
          v-model="title"
          standout
          color="sub"
          bg-color="black"
          text-color="white"
          input-style="color:#fff;"
        />
        <q-input
          dense
          v-model="description"
          standout
          type="textarea"
          label="Description"
          color="sub"
          bg-color="black"
          text-color="white"
          input-style="height: 16em;resize: none;font-size: 14px;color:#fff;"
          hide-bottom-space
        />
        <q-select
          dense
          borderless
          filled
          label-color="white"
          color="sub"
          bg-color="black"
          v-model="language"
          :options="languages"
          label="Audio Language"
        />
        <div>
          <div class="text-sub one-line-text">Thumbnail</div>
          <div class="thumbnail-box row q-gutter-x-xs">
            <div
              :class="`col box selector row justify-center ${
                selectedThumbnailFile ? 'selected' : ''
              }`"
            >
              <q-img
                v-if="selectedThumbnailFile"
                :src="selectedThumbnailImage"
                style="width: 100%; height: 100%"
                @click="selectThumbnail"
              />
              <q-btn
                v-else
                style="width: 100%; height: 100%"
                icon="mdi-plus"
                flat
                color="sub"
                padding="none"
                @click="selectThumbnail"
              />
            </div>
            <div :class="`col box preview ${frame1Selected ? 'selected' : ''}`">
              <q-img
                :src="frame1Image"
                style="width: 100%; height: 100%"
                @click="changeCurrentThumbnail(frame1Image, 'frame1')"
              />
            </div>
            <div :class="`col box preview ${frame2Selected ? 'selected' : ''}`">
              <q-img
                :src="frame2Image"
                style="width: 100%; height: 100%"
                @click="changeCurrentThumbnail(frame2Image, 'frame2')"
              />
            </div>
            <q-file
              v-model="selectedThumbnailFile"
              type="file"
              ref="selectThumbnailInput"
              style="display: none"
              accept=".jpg, .png"
              @update:model-value="onThumbnailFileChange"
            />
          </div>
        </div>
      </div>
      <div class="col-4">
        <div class="column fit right">
          <right-box :language="language" :thumbnail="selectedThumbnailImage" />
        </div>
      </div>
    </div>
    <q-separator />
    <div class="footer row justify-between">
      <slot name="stepper"></slot>
      <q-stepper
        class="custom-videouploader-stepper"
        alternative-labels
        v-model="currentStep"
        color="sub"
        active-color="accent"
      >
        <q-step style="padding: 0" title="Details" name="step2"></q-step>
        <q-step style="padding: 0" title="Categorization" name="step3"></q-step>
        <q-step style="padding: 0" title="Visability" name="step4"></q-step>
      </q-stepper>
      <div class="row items-center q-mr-md">
        <q-btn
          :label="buttonText"
          no-caps
          rounded
          color="accent"
          @click="next"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  computed,
  watch,
  PropType,
  onMounted,
} from 'vue';
import { QFile } from 'quasar';
import LanguageConfig from 'src/models/LanguageConfig';
import Video from 'src/models/Video';
import { getVideoFrame } from 'src/utils/common';
import RightBox from './RightBox.vue';
import { useGlobalStore } from 'stores/global-store';
export default defineComponent({
  props: {
    file: {
      type: File,
      required: false,
    },
    video: {
      type: Object as PropType<Video>,
      required: false,
    },
    buttonText: {
      type: String,
      default: 'Next',
    },
  },
  components: {
    RightBox,
  },
  emits: ['minimize', 'maximize', 'close', 'next'],
  setup(props, { emit }) {
    const globalStore = useGlobalStore();
    const languages = computed(() => globalStore.languageConfig);
    const language = ref<LanguageConfig>();
    const selectThumbnailInput = ref<QFile>();
    const selectedThumbnailFile = ref<File | null>(null);
    const selectedThumbnailImage = ref<any | null>(null);
    const frame1Image = ref<any | null>();
    const frame2Image = ref<any | null>();
    const frame1Selected = ref(false);
    const frame2Selected = ref(false);
    const currentStep = ref('step2');
    const filename = ref('');
    const title = ref('');
    const description = ref('');
    const thumbnail = ref();
    watch(language, () => {
      // console.log(language.value);
    });
    onMounted(async () => {
      if (props.video) {
        filename.value = props.video.title;
        title.value = props.video.title;
        description.value = props.video.description;
      }
      if (props.file) {
        filename.value = props.file.name;
        frame1Image.value = await getVideoFrame(props.file, 0);
        frame2Image.value = await getVideoFrame(props.file, 0.9);
      }
    });
    function next() {
      const info = {
        title: title.value,
        descript: description.value,
        language: language.value,
      };
      emit('next', info);
    }
    function selectThumbnail() {
      if (selectThumbnailInput.value) {
        selectThumbnailInput.value.pickFiles();
      }
    }
    function onThumbnailFileChange(file: File) {
      if (file) {
        const url = URL.createObjectURL(file);
        selectedThumbnailImage.value = url;
        frame1Selected.value = false;
        frame2Selected.value = false;
      }
    }
    function changeCurrentThumbnail(image: any, frame: string) {
      selectedThumbnailFile.value = null;
      selectedThumbnailImage.value = image;
      if (frame === 'frame1') {
        frame1Selected.value = true;
        frame2Selected.value = false;
      } else {
        frame2Selected.value = true;
        frame1Selected.value = false;
      }
    }
    return {
      selectThumbnailInput,
      selectedThumbnailFile,
      selectedThumbnailImage,
      title,
      description,
      filename,
      currentStep,
      languages,
      language,
      thumbnail,
      frame1Image,
      frame2Image,
      frame1Selected,
      frame2Selected,
      next,
      emit,
      selectThumbnail,
      onThumbnailFileChange,
      changeCurrentThumbnail,
    };
  },
});
</script>
<style lang="sass" scoped>

.file-name
  font-size: 12px
  color: $sub
</style>
<style lang="scss" scoped>
.file-name {
  max-width: 495px;
}
.thumbnail-box {
  .box {
    width: 105px;
    height: 80px;
    border: 1px solid #404040;
    background-color: #000;
  }
  .selected {
    border: 1px solid $accent !important;
  }
}
.right {
  .upload-indicator {
    background-color: #000;
  }
}
</style>
